<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>新大楼会议室预订系统登陆</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="keywords" content="登陆，会议室，预定，预定系统，同花顺">
      <meta name="description" content="同花顺新大楼会议室预订系统">
      <!-- 引入 Bootstrap -->
      <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="/static/css/responsive-nav.css">
      <link rel="stylesheet" href="/static/css/fm.selectator.jquery.css"/>
      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->

      <style type="text/css">
      html,body{font-family: "微软雅黑";    padding: 0px !important; margin: 0px !important;direction: ltr;font-size:14px;height:100%;}
      .navbox{background:#212121;margin:0;}
      .navbar{min-height:40px;border:none;}
      .navbar-brand {height: 40px;padding: 12px 15px;color:#fff;font-weight:bolder;}
      .navbar-brand:hover,.navbar-brand:focus{color:#fff;}
      .navbar-header .admin_logo{height:40px;width:40px;float: left;margin-left:10px;padding:2%;}
      .navbar-header .admin_logo .admin_logo_logo{height:100%;width:100%;background:url("/static/images/adminlogo.png") no-repeat;background-size:100% 100%;}
      .navbar-text{text-align:right;margin:0;line-height:40px;padding-right:6px;color: #fff;}
      .navbar-text span{font-weight:bold;margin-right:6px;}
      .navbar-text a{font-weight: bold;transition:all 0.2s ease;color:#999;}
      .navbar-text a:hover{transition:all 0.2s ease;color: #C75151;}
      /*nav结束*/
      .content_box {padding-top: 40px;height:100%;}
      .content_box .navbar_left{height:100%;margin:0;}
      .leftnav{width:225px;padding:0;background: #3d3d3d;}
      .leftnav ul{width:100%;padding-top: 20px;}
      .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {color: #fff;background-color: #C75151;}
      .active{position:relative;}
      .navbar-default .navbar-nav>li>a {color: #444;}
      .navbar-nav{margin:0;}
      .navbar-toggle{margin:0;margin-top:4px;}
      .navbar-toggle span{background:#5A5A5A;}
      .navbar-default .navbar-nav>li>a {
              color: #FFF;
          }
      .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{color:#fff;}

      .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
        color: #999;
        background-color: #3D3D3D;}
      .open>.dropdown-menu{background:#3d3d3d;}
      .dropdown-menu>li>a{color:#bdbdbd;}
      /*正文*/
      .bt_cotent{width:100%;}
      .bt_cotent .cont_content{margin-left:225px;}
      .bt_cotent .cont_content .yd_btn{margin-top:20px;}
      .bt_cotent .cont_content .yd_select{margin-top:20px;}
      .btn-lg,.btn-group-lg>.btn {padding: 6px 16px;}
      .table-responsive {margin-top:15px;}
      .bt_cotent .cont_content .colorRed{background:#CA6464;border:none;}
      .selectator_option_title{margin-left:10px;}
      #select4 {width:100%;height: 36px;}   
      th{text-align: center;}
      /* 小型设备（平板电脑，768px 起） */
      @media (max-width: 768px) {
          .bt_cotent{padding-top:20px;}
          .navbar-text{background: #3D3D3D;}
          .navbar-brand{font-size:14px;}
          .user_message{background:#DEDEDE;}
          .leftnav{width:100%;}
          .content_box {padding-top: 59px}
          .leftnav ul li{background: #212121;}
          .navbar-default .navbar-nav .open .dropdown-menu>li>a {
          color: #bdbdbd;}
          .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{color:#bdbdbd;}
          .bt_cotent .cont_content{width:100%;margin:0;}


       }


      @media (min-width: 768px){

          .leftnav{position: absolute;z-index:2;}
          .bt_cotent{position: absolute;top:0;}
          .navbar-nav>li {float:none;}
          .navbar-collapse.collapse{height:100%!important;}
          .active i{position:absolute;right:0;display:block;height:25px;width:8px;top: 14px;background:url("/static/images/sidebar-menu-arrow.png")no-repeat;}
          .container {width: 525px;}

      }
      /* 中型设备（台式电脑，992px 起） */
      @media (max-width: 992px) {

       }


      @media (min-width: 992px) {
        .container {
            width: 745px; 
        }

      }


      /* 大型设备（大台式电脑，1200px 起） */
      @media (max-width: 1200px) {

      }


      @media (min-width: 1200px){
      .container {
          width: 945px; 
        }
      }

       @media (min-width: 1400px){
      .container {
          width: 1180px; 
        }
      }

      </style>
   </head>
   <body>
     <div class="navbar navbar-fixed-top navbox">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" 
             data-target="#example-navbar-collapse">
             <span class="sr-only">切换导航</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </button>
          <div class="admin_logo">
            <div class="admin_logo_logo"></div>
          </div>
          <a class="navbar-brand" href="#">同花顺会议室预定系统</a>
        </div>
        <div class="user_message">
          <p class="navbar-text navbar-right">
            你好,<span>{{ request.session.username }}-权限{{request.sesion.permissions}}  </span>
            <a href="{% url 'logout' %}" class="navbar-link">退出</a>
            <a href="#" class="navbar-link">设置</a>
          </p>
        </div>
     </div>



     <div class="page-container row-fluid content_box">
        <div class="navbar navbar-default navbar_left" role="navigation">
           <div class="navbar-header">
           </div>
           <div class="collapse navbar-collapse leftnav" id="example-navbar-collapse">
              <ul class="nav navbar-nav">
                 <li class="active">
                    <a href="/index/" target="_self">首页</a>
                    <i></i>
                  </li>
                 <li class="dropdown">
                    <a href="#" class="dropdown-toggle" target="_self" data-toggle="dropdown">
                       我的会议<b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                       <li><a href="/mybook/" target="_self">我预定的会议</a></li>
                       <li><a href="{% url 'myjoinMeeting' %}">我参与的会议</a></li>
                    </ul>
                 </li>
              </ul>
           </div>
            <div class="bt_cotent">
              <div class="cont_content">
                <div class="container">
                  <h3>
                    会议室预定
                    <small>查看会议室状态及预订</small>
                  </h3>

                  <div class="row">
                      <div class="col-xs-12 col-sm-12 yd_btn">
                         <button class="btn btn-success" data-toggle="modal" data-target="#myModal">预定会议室 + </button>
                      </div>
                  </div>
                    <form action="/index/" method="post">
                         {% csrf_token %}
                        <div class="row yd_select">
                              <div class="col-xs-6 col-sm-4">
                                 <div class="form-group">
                                    <label for="name">楼层选择:</label>
                                    <select class="form-control" name="floornum" id="floor">
                                        {%for floor in floors%}
                                            {%ifequal floor.floorNum floornum%}
                                                <option selected="selected" value="{{floor.floorNum}}">{{floor.floorNum}}</option>
                                            {%else%}
                                                <option value="{{floor.floorNum}}">{{floor.floorNum}}</option>
                                            {%endifequal%}

                                        {%endfor%}
                                    </select>
                                </div>
                              </div>
                              <div class="col-xs-6 col-sm-4">
                                 <div class="form-group">
                                    <label>日期选择:</label>
                                   <input type="text" value="{{date}}" class="form-control roomDate" name="roomDate" style="cursor: pointer;"
                                     readonly="readonly" onClick="WdatePicker({isShowClear:false,minDate:new Date(),maxDate:'%y-%M-{%d+7}'})" id="floordata">
                                </div>
                              </div>
                              <div class="col-xs-12 col-sm-4 yd_btn">
                                <button type="submit" class="btn btn-primary btn-lg btn-block" id="searchtable">搜索</button>
                              </div>
                        </div>

                    </form>

                <div class="row">
                  <div class="col-xs-12 col-sm-12">
                      <div class="table-responsive">
                         <table class="table table-bordered">
                            <caption style="color:red;">说明：带有“*”的会议室有电视机{{bookAnswer}}</caption>
                            <thead>
                               <tr>
                                  <th>会议室<br />时间</th>
                                  <th colspan="2">上午9点<br />9:30</th>
                                  <th colspan="2">上午10点<br />10:30</th>
                                  <th colspan="2">上午11点<br />11:30</th>
                                  <th colspan="2">中午12点<br />12:30</th>
                                  <th colspan="2">下午13点<br />13:30</th>
                                  <th colspan="2">下午14点<br />14:30</th>
                                  <th colspan="2">下午15点<br />15:30</th>
                                  <th colspan="2">下午16点<br />16:30</th>
                                  <th colspan="2">下午17点<br />17:30</th>
                                  <th colspan="2">晚上18点<br />18:30</th>
                                  <th colspan="2">晚上19点<br />19:30</th>
                                  <th colspan="2">晚上20点<br />20:30</th>
                                  <th colspan="2">晚上21点<br />21:30</th>
                               </tr>
                            </thead>
                            <tbody id="teletable">
                                {% for room in answers %}
                                    <tr >
                                      <td>{{room.room.name}}</td>
                                        {%for i in room.orderTime%}
                                            {% ifequal i 1 %}
                                                <td class="colorRed"></td>
                                            {% else %}
                                                <td ></td>
                                            {% endifequal %}
                                        {%endfor%}
                                   </tr>
                                {% endfor %}

                            </tbody>
                         </table>
                      </div>    
                  </div>
                </div>


            </div>
        </div>
     </div>


     <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
       aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
           <form action="/bookRoom/" method="post">
                  {% csrf_token %}
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal" aria-hidden="true">
                      &times;
                </button>
                <h5 class="modal-title" id="myModalLabel">
                   预订会议室
                </h5>
             </div>
             <div class="modal-body">
                  <div class="row">
                     <div class="col-xs-12 col-sm-12">
                         <div class="form-group">
                            <label>日期选择:</label>
                           <input type="text" required="required" class="form-control" style="cursor: pointer;"
                             readonly="readonly" id="bookdate" name="date" onClick="WdatePicker({isShowClear:false,minDate:new Date(),maxDate:'%y-%M-{%d+7}'})" id="floordata">
                        </div>
                      </div>
                  </div>
                  <div class="row">
                     <div class="col-xs-6 col-sm-6">
                         <div class="form-group">
                            <label for="name">会议开始时间:</label>
                            <select name="startTime" class="form-control" id="startTime">
                               <option value="1">09:00</option>
                               <option value="2">09:30</option>
                               <option value="3">10:00</option>
                               <option value="4">10:30</option>
                               <option value="5">11:00</option>
                               <option value="6">11:30</option>
                               <option value="7">12:00</option>
                               <option value="8">12:30</option>
                               <option value="9">13:00</option>
                               <option value="10">13:30</option>
                               <option value="11">14:00</option>
                               <option value="12">14:30</option>
                               <option value="13">15:00</option>
                               <option value="14">15:30</option>
                               <option value="15">16:00</option>
                               <option value="16">16:30</option>
                               <option value="17">17:00</option>
                               <option value="18">17:30</option>
                               <option value="19">18:00</option>
                               <option value="20">18:30</option>
                               <option value="21">19:00</option>
                               <option value="22">19:30</option>
                               <option value="23">20:00</option>
                               <option value="24">20:30</option>
                               <option value="25">21:00</option>
                               <option value="26">21:30</option>
                            </select>
                        </div>
                      </div>
                      <div class="col-xs-6 col-sm-6">
                         <div class="form-group">
                            <label for="name">会议结束时间:</label>
                            <select class="form-control" name="endTime" id="endTime">
                              
                            </select>
                        </div>
                      </div>
                  </div>
                  <div class="row">
                        <div class="col-xs-12 col-sm-12">
                           <div class="form-group">
                              <label>会议主题:</label>
                              <input type="text" class="form-control" name="topic"  required="required" style="cursor: auto;">
                          </div>
                        </div>

                        <div class="col-xs-12 col-sm-12">
                           <div class="form-group">
                              <label>会议人数:</label>
                              <input type="text" class="form-control" name="meetingCount" required="required"  style="cursor: auto;">
                          </div>
                        </div>

                        <div class="col-xs-12 col-sm-12">
                           <div class="form-group">
                              <label for="name">会议室名称:</label>
                              <select class="form-control" name="roomId">
                                 {% for room in answers %}
                                      {%ifequal room.room.state True %}
                                        <option value="{{room.room.id}}">{{room.room.name}}</option>
                                      {%endifequal%}
                                  {%endfor%}
                              </select>
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-12">
                          <div id="wrapper">
                              <label for="select4">
                                参会人：
                              </label>
                              <select id="select4" name="select4" required="required" multiple>
                                  {% for emp in employees %}
                                    <option value={{emp.id}} data-left="<input name='emps[]'style='display:none' value={{emp.id}}>">{{emp.name}}</option>
                                  {% endfor %}
                              </select>
                          </div>
                        </div>

                        <div class="col-xs-12 col-sm-12">
                           <div class="form-group">
                              <label>声请人邮箱(仅限 @myhexin.com):</label>
                              <input type="text" name="userEmail" class="form-control" required="required" style="cursor: auto;">
                          </div>
                        </div>

                        <div class="col-xs-12 col-sm-12">
                           <div class="form-group">
                              <label>邮箱密码:</label>
                              <input type="password" name="userPswd" class="form-control" required="required" style="cursor: auto;">
                          </div>
                        </div>
                  </div>
             </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-default" 
                   data-dismiss="modal">关闭
                </button>
                <button type="submit" class="btn btn-primary">
                   预约
                </button>
             </div>
          </div><!-- /.modal-content -->
           </form>
      </div><!-- /.modal -->
    </div>


      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
      <!--bootstrat nav插件-->
      <script src="/static/js/responsive-nav.js"></script>
      <!--日期插件-->
      <script src="/static/js/WdatePicker.js"></script>
      <!--多选下拉菜单-->
      <script src="/static/js/fm.selectator.jquery.js"></script>

      <script type="text/javascript">
      Date.prototype.Format = function (fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
        var timenow=new Date().Format("yyyy-MM-dd");
        $("#bookdate").val(timenow);


        $(function () {
            function selet(){
              var $select4 = $('#select4');
              if ($select4.data('selectator') === undefined) {
                $select4.selectator({
                  showAllOptionsOnFocus: true
                });
              } 
            }
            selet();


            $("#startTime").change(function () {  
            var stime = $("#startTime  option:selected").text();
            var shour = stime.substring(0,2);
            var smin  = stime.substring(3,5);
            $("#endTime").empty();
            var count =-1;
            for (var i = shour; i < 22; i++) {
              if (smin=="00") {
                    count++;
                  jQuery("<option value='"+count+"'>"+i+":"+smin+"</option>").appendTo("#endTime");
                  count++;
                  jQuery("<option value='"+count+"'>"+i+":30"+"</option>").appendTo("#endTime");
              }else{
                    count++;
                  jQuery("<option value='"+count+"'>"+i+":"+smin+"</option>").appendTo("#endTime");
                  count++;
                  jQuery("<option value='"+count+"'>"+(i*1+1)+":00"+"</option>").appendTo("#endTime");
              };
            };
            if(smin!="00"){
              jQuery("#endTime option:last").remove();
            }
            jQuery("#endTime option:first").remove();
          });  
          $("#startTime").trigger("change");  


          $("#searchtable").click(function(){
                var floor = $("#floor").val();
                var date = $("#floordata").val();
                $.ajax({
                    type:"post",
                    data:{"floor":floor,"fdate":date},
                    url:"/index/",
                    success:function(data){
                        $("#teletable").html(data);
                    }
                })

            })

        });

        
         

      </script>

   </body>
</html>
